<template>
  <div class="mediation-process">
    <div class="mediation-process-item" v-for="item in process">
      <img :src="item.icon" alt="" class="icon">
      <div class="text-block">
        <div class="name">{{item.name}}</div>
        <div class="desc">{{item.desc}}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'MediationProcess',
  data(){
    return{
      process:[
        {name:'受理登记',desc:'接受纠纷当事人申请，进行基本信息登记',icon:require('@/assets/images/process-icon-1.png')},
        {name:'调查了解',desc:'走访调查，了解纠纷具体情况',icon:require('@/assets/images/process-icon-2.png')},
        {name:'组织调解',desc:'组织双方进行调解，促进达成和解协议',icon:require('@/assets/images/process-icon-3.png')},
        {name:'跟踪回访',desc:'对调解结果进行回访，确保协议履行',icon:require('@/assets/images/process-icon-4.png')},
      ]
    }
  }
}
</script>
<style scoped lang="scss">
.mediation-process{
  width: 100%;
  height: 100%;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 4px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(0,198,255,.3);
  }
  &::-webkit-scrollbar-track{
    border-radius: 3px;
    background: rgba(0,24,48,.3);
  }
  .mediation-process-item{
    width: 100%;
    height: 75px;
    border-radius: 8px;
    border: 1px solid #32B4FF;
    background: #06213B;
    display: flex;
    align-items: center;
    padding: 0 15px;
    margin-bottom: 10px;
    .icon{
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 15px;
    }
    .text-block{
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .name{
        font-weight: bold;
        color: #fff;
        margin-bottom: 10px;
      }
      .desc{
        color: #fff;
        font-size: 14px;
      }
    }
  }
}
</style>
